<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="发送ajax请求头参数" onclick="sendAjaxHeaderParams()">
    <script>
       /*  
            请求头参数：以键值对方式为服务器提供报文解析时的相关数据(如：Content-type告知服务器请求的相关格式)
            请求头参数在传统的web请求中很难自行定义的，一般都由标签或者浏览器自行设定
            请求头参数多数是由w3c规范的一些具有固定意义的参数属性，一般不需要手动设置
            请求头参数本身会携带一些比较敏感的描述属性，而这些数据可能会导致一些安全问题，开发中也会对请求头属性进行设置操作的限制
            ajax请求中提供专门的请求头设置方法，通过该方法可以完成自定义请求头属性的设置和相关请求头属性的修改
            ajax请求头属性设置本身也是受限的，存在一些敏感的请求头属性也是无法设置或修改的 
            
            xhr.setRequestHeader(String header, String value)` 是设置HTTP请求头部的方法。
            此方法必须在  open() 方法和 send()   之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。
            header 取值要求 英文字符和关键字-(不同服务器的请求格式解析规则不同，要根据服务器进行自行判断)
            不支持设置中文的


        */
        function sendAjaxHeaderParams(){
            console.log("----==");
            let xhr=new XMLHttpRequest();
            xhr.open("get","/params/header");
            // xhr.setRequestHeader("中文","哈哈");
            // xhr.setRequestHeader("aa","hello");

            //自定义请求头，用于表示当前请求是由XMLHttpRequest发送
            xhr.setRequestHeader("X-Requested-With","XMLHttpRequest");
            xhr.setRequestHeader("X-Requested-With","bb");
            xhr.setRequestHeader("X-Requested-With","cc");
            xhr.onload=function(){
                console.log(xhr.responseText);
            };
            xhr.send();

        }
    </script>
</body>
</html>